<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的博客 - 文章标题</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>

<div class="header">
    <h1>我的博客</h1>
    <a href="#">首页</a>
    <a href="#">关于我</a>
    <a href="#">所有文章</a>
</div>

<article id="content" class="container"></article>

<footer class="footer">
    <p>&copy; 2025 我的博客. All rights reserved.</p>
</footer>

<script>
    window.onload = function() {
        // 确保DOM和所有脚本都已经加载完毕
        const markdownContent = `
# 文章标题

## 章节一

这里是文章的主要内容。可以包含文本、图片、视频等多媒体元素。

## 章节二

更多内容...
`;

        // 使用marked库解析Markdown并插入到页面中
        document.getElementById('content').innerHTML = marked.parse(markdownContent);
    };
</script>

</body>
</html>